<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
         <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
           <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['vip.add']">新增</el-button>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="vipList"
        border
        v-loadMore="[payLoads,'vip-list']"
        style="width: 100%">
        <el-table-column
          label="排序"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="会员图标"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <img style="width:50px;heigth:50px" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="会员等级"
          width="100"
          align="center"
          prop="vip"
        >
          <template slot-scope="scope">
            <span>{{scope.row.vip | watchType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="等级名称"
          align="center"
          prop="name"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="升级方式"
          align="center"
          prop="method"
        >
          <template slot-scope="scope">
            <span>{{scope.row.method | watchMethod}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="等级描述"
          align="center"
          prop="memo"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-permission="['vip.edit']">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-permission="['vip.del']">
                <a style="margin-left: 10px" @click="deleteAd(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--新增标签-->
      <el-dialog title="新增等级" v-el-drag-dialog :visible.sync="dialogFormVisible" width="700px">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="addVip" :model="addVip" :rules="rules" label-width="100px" size="mini">
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="等级名称" prop="name">
                    <el-input style="width: 100%" v-model="addVip.name" placeholder="例如：黄金会员"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="会员等级" prop="vip">
                    <el-select style="display: inline-block" v-model="addVip.vip" placeholder="请选择等级">
                      <el-option v-for="item in optionList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="会员类型" prop="vipType">
                    <el-select v-model="addVip.vipType" placeholder="请选择类型">
                      <el-option v-for="item in vipTypeList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="升级方式" prop="method">
                    <el-select v-model="addVip.method" placeholder="请选择方式" @change="methodChange">
                      <el-option v-for="item in methodList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="addVip.method==1">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="addVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="addVip.method==5">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="addVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="addVip.method==2">
                <el-col :span="12">
                  <el-form-item label="推广人数" prop="people">
                    <el-input v-model="addVip.people" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="addVip.method==4">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="addVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="推广人数" prop="people">
                    <el-input v-model="addVip.people" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="addVip.method==3">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="addVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终身会员" prop="quantity">
                    <el-input v-model="addVip.quantity" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24">

                <el-col :span="8">
                  <el-form-item label="会员折扣" prop="agio">
                      <el-input style="width: 80%" v-model="addVip.agio" oninput="if(value>100)value=100" placeholder="请输入会员折扣"></el-input>%
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="等级描述" prop="memo">
                <el-input type="textarea" v-model="addVip.memo" placeholder="例如：充值500升级为黄金会员"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <single-upload :key="Math.random()" :singleUploadTitle='singleUploadTitle' v-model="addVip.icon"
                               style="display: inline-block;width: 440px;"></single-upload>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="saveAd('addVip')">确 定</el-button>
        </div>
      </el-dialog>
      <!--编辑标签-->
      <el-dialog title="编辑等级" v-el-drag-dialog :visible.sync="editVisible" width="600px">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="editVip" :model="editVip" :rules="rules" label-width="100px" size="mini">
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="等级名称" prop="name">
                    <el-input style="width: 100%" v-model="editVip.name" placeholder="例如：黄金会员"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="会员等级" prop="vip">
                    <el-select style="display: inline-block" v-model="editVip.vip" placeholder="请选择等级">
                      <el-option v-for="item in optionList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="会员折扣" prop="agio">
                    <el-input style="width:50%" v-model="newagio" @input="agioinput" oninput="if(value>100)value=100"/>%
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :span="24">
                <el-col :span="12">
                  <el-form-item label="会员类型" prop="method">
                    <el-select v-model="editVip.vipType" placeholder="请选择类型" style="width: 100%">
                      <el-option v-for="item in vipTypeList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="升级方式" prop="method">
                    <el-select style="width: 100%" v-model="editVip.method" placeholder="请选择方式" @change="methodChange">
                      <el-option v-for="item in methodList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="editVip.method==1">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="editVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="editVip.method==5">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="editVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="editVip.method==2">
                <el-col :span="12">
                  <el-form-item label="推广人数" prop="people">
                    <el-input v-model="editVip.people" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="editVip.method==4">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="editVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="推广人数" prop="people">
                    <el-input v-model="editVip.people" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :span="24" v-if="editVip.method==3">
                <el-col :span="12">
                  <el-form-item :label="methodText" prop="amount">
                    <el-input v-model="editVip.amount" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终身会员" prop="quantity">
                    <el-input v-model="editVip.quantity" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="等级描述" prop="memo">
                <el-input type="textarea" v-model="editVip.memo"></el-input>
              </el-form-item>

              <el-form-item label="等级图标">
                <single-upload :key="Math.random()" :singleUploadTitle='singleUploadTitle' v-model="editVip.icon"
                               style="display: inline-block;width: 440px;"></single-upload>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="updateVip('editVip')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-container>

</template>

<script>
  import loadMore from '@/utils/loadMore.js'
  import {list, del, find, save, update} from "../../api/vip";
  import {list as tagList} from '../../api/tag'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import SingleUpload from '@/components/Upload/singleUpload'
  import utils from '@/utils/utils'
  export default {
    directives: {elDragDialog, permission, loadMore},
    name: "vip-list",
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        newagio:0,
        payLoads: '',
        vipList: [],
        orders: '',
        pageNum: 1,
        tags:[],
        vipSwitch: false,
        editVisible: false,
        clicked: false,
        dialogFormVisible: false,
        rules: {
          name: [
            {required: true, message: '请输入等级名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          amount: [
            {required: true, message: '请输入消费金额', trigger: 'blur'},
          ],
          people: [
            {required: true, message: '请输入推广人数', trigger: 'blur'},
          ],
          quantity: [
            {required: true, message: '请输入消费数量', trigger: 'blur'},
          ],
          vip:[
            {required: true, message: '请选择会员等级', trigger: 'blur'},
          ],
          agio:[
             {required: true, message: '请输入会员折扣', trigger: 'blur'},
           ],
          vipType:[
            {required: true, message: '请选择会员类型', trigger: 'blur'},
          ],
          enterpriseId: [
            {required: true, message: '请输入所属企业', trigger: 'blur', type: 'number'},
          ],
          method: [
            {required: true, message: '请选择升级方式', trigger: 'blur'},
          ]
        },
        total: 0,
        pageSize: 20,
        addVip: {
          transcendAgio:0,
          peerAgio:0,
          agio: 0,
          amount: null,
          title:'',
          tagid:'',
          createDate: '',
          enterpriseId: null,
          memo: '',
          vipType: 0,
          method: 0,
          modifyDate: '',
          name: '',
          people: null,
          quantity: null,
          vip: '',
          icon:'',

        },
        singleUploadTitle:'200*200',
        editVip: {
          transcendAgio: 0 ,
          peerAgio: 0 ,
          agio: '',
          id: "",
          amount: null,
          enterpriseId: null,
          title:'',
          tagid:'',
          memo: '',
          vipType: 0,
          method: 0,
          modifyDate: '',
          name: '',
          people: null,
          quantity: null,
          vip: '',
          icon:'',
        },
        queryType: true,
        query: {
          name: ""

        },
        keyword: {
          name: ""
        },
        optionList: [
          {
            value: '0',
            label: 'VIP0'
          }, {
            value: '1',
            label: 'VIP1'
          }, {
            value: '2',
            label: 'VIP2'
          }, {
            value: '3',
            label: 'VIP3'
          }, {
            value: '4',
            label: 'VIP4'
          },
          {
            value: '5',
            label: 'VIP5'
          },
          {
            value: '6',
            label: 'VIP6'
          },
          {
            value: '7',
            label: 'VIP7'
          },
          {
            value: '8',
            label: 'VIP8'
          },
          {
            value: '9',
            label: 'VIP9'
          },
          {
            value: '10',
            label: 'VIPA'
          }
        ],
        methodList: [
          {
            value: 0,
            label: '不升级'
          }, {
            value: 1,
            label: '累计消费'
          }, {
            value: 2,
            label: '推广人数'
          }
          , {
            value: 3,
            label: '付费会员'
          },
          {
            value: 4,
            label: '累计消费/推广人数'
          },
          {
            value: 5,
            label: '单次消费'
          }
        ],
        vipTypeList: [
          {
            value: 0,
            label: '消费者'
          }, {
            value: 1,
            label: '代理商'
          },
          {
            value: 2,
            label: '服务商'
          }
        ],
        methodText: '累计消费'
      }
    },
    filters: {
      watchType(val) {
        if (val == 0) {
          return 'VIP0'
        } else if (val == 1) {
          return 'VIP1'
        } else if (val == 2) {
          return 'VIP2'
        } else if (val == 3) {
          return 'VIP3'
        } else if (val == 4) {
          return 'VIP4'
        } else if (val == 5) {
          return 'VIP5'
        } else if (val == 6) {
          return 'VIP6'
        } else if (val == 7) {
          return 'VIP7'
        } else if (val == 8) {
          return 'VIP8'
        } else if (val == 9) {
          return 'VIP9'
        } else if (val == 10) {
          return 'VIPA'
        }
      },
      watchMethod(val) {
        if (val == 0) {
          return '不升级'
        } else if (val == 1) {
          return '累计消费'
        } else if (val == 2) {
          return '推广人数'
        } else if (val == 3) {
          return '付费会员'
        } else if (val == 4) {
          return '累计消费/推广人数'
        } else if (val == 5) {
          return '单次消费'
        }
      }
    },
    created() {
      this.loadVip()
      this.loadTag()
    },
    components:{
      SingleUpload
    },
    methods: {
      loadTag(){
        let params=new URLSearchParams()
        params.append("type",9)
        tagList(params).then(response=>{
          this.tags=response.data.data
        })
      },
      methodChange(val) {
        console.log(val)
        if (val == 0) {
          this.methodText = '累计消费'
        } else if (val == 1) {
          this.methodText = '消费金额'
        } else if (val == 2) {
          this.methodText = '累计消费'
        } else if (val == 3) {
          this.methodText = '年费'
        } else if (val == 4) {
          this.methodText = '消费金额'
        }
      },
      loadVip() {
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('keyword', this.keyword.name);
        list(params).then(response => {
          this.vipList = response.data.data
          this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        })
      },
      changeClick(val) {
        if (val == 0) {
          this.vip = 'VIP0'
        } else if (val == 1) {
          this.vip = 'VIP1'
        } else if (val == 2) {
          this.vip = 'VIP2'
        } else if (val == 3) {
          this.vip = 'VIP3'
        } else if (val == 4) {
          this.vip = 'VIP4'
        } else if (val == 5) {
          this.vip = 'VIP5'
        } else if (val == 6) {
          this.vip = 'VIP6'
        } else if (val == 7) {
          this.vip = 'VIP7'
        } else if (val == 8) {
          this.vip = 'VIP8'
        } else if (val == 9) {
          this.vip = 'VIP9'
        } else if (val == 10) {
          this.vip = 'VIPA'
        }
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      editClick(row) {
        this.editVip.id = row.id
        this.findVip()
        this.editVisible = true
      },
      findVip() {
        find(this.editVip.id).then(response => {
          console.log(response,'详情')
          this.editVip.peerAgio = response.data.vip.peerAgio
          this.editVip.transcendAgio = response.data.vip.transcendAgio
          this.editVip.agio = response.data.vip.agio
          this.newagio=this.editVip.agio
          this.editVip.name = response.data.vip.name
          this.editVip.amount = response.data.vip.amount
          this.editVip.quantity = response.data.vip.quantity
          this.editVip.people = response.data.vip.people
          this.editVip.vipType = response.data.vip.vipType
          this.editVip.title=response.data.vip.title
          this.editVip.memo = response.data.vip.memo
          this.editVip.enterpriseId = response.data.vip.enterpriseId
          this.editVip.vip = JSON.stringify(response.data.vip.vip)
           this.editVip.icon = response.data.vip.icon
          this.editVip.method = response.data.vip.method
          if(response.data.vip.tagid == null){
            this.editVip.tagid = null
          }else {
            this.editVip.tagid=Number(response.data.vip.tagid)
          }
          if(this.editVip.agio > 0){
            this.vipSwitch = true
          } else {
            this.vipSwitch = false
          }
          console.log(this.editVip)
          console.log(this.editVip.agio)
        })
      },
      addClick() {
        this.addVip.transcendAgio = 0;
        this.addVip.peerAgio = 0;
        this.addVip.agio = 0;
        this.vipSwitch = false;
        this.addVip.amount = null;
        this.addVip.createDate = '';
        this.addVip.title=''
        this.addVip.tagid=''
        this.addVip.enterpriseId = null,
          this.addVip.memo = '',
          this.addVip.method = null,
          this.addVip.name = '',
          this.addVip.people = null,
          this.addVip.vip = '',
          this.addVip.icon = '',
          this.dialogFormVisible = true;
      },
      resetAd() {
        this.query.name = '';
        this.pageNum = 1;
        this.keyword = this.query;
        this.loadVip();
      },
      deleteAd(data) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            this.loadVip()
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          })
        }).catch(error => {

        });
      },
      saveAd(addvip) {
        this.$refs[addvip].validate((valid) => {
          if (valid) { // 校验表单
            // this.addVip.agio = 0;
            this.vipSwitch = false;
            this.clicked = true;
            console.log()
            var addvip = {
              peerAgio: this.addVip.peerAgio,
              transcendAgio: this.addVip.transcendAgio,
              agio: this.addVip.agio,
              amount: this.addVip.amount,
              createDate: new Date(),
              tagid: this.addVip.tagid,
              title: this.addVip.title,
              enterpriseId: this.addVip.enterpriseId,
              memo: this.addVip.memo,
              vipType: this.addVip.vipType,
              method: this.addVip.method,
              modifyDate: new Date(),
              name: this.addVip.name,
              people: this.addVip.people,
              quantity: this.addVip.quantity,
              vip: this.addVip.vip,
              icon:this.addVip.icon
            }
            if(addvip.tagid == ""){
              addvip.tagid = null
            }
            save(addvip).then(response => {
              console.log(response)
                this.clicked = false;
              this.dialogFormVisible = false;
              this.loadVip()
              this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            }).catch(error => {
              this.clicked = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      updateVip(editVip) {
        var _this = this
        this.$refs[editVip].validate((valid) => {
          if (valid) {
            this.clicked = true;
            var editVip = {
              peerAgio:this.editVip.peerAgio,
              transcendAgio:this.editVip.transcendAgio,
              agio:this.newagio,
              id: this.editVip.id,
              amount: this.editVip.amount,
              enterpriseId: this.editVip.enterpriseId,
              memo: this.editVip.memo,
              vipType: this.editVip.vipType,
              tagid: this.editVip.tagid,
              title: this.editVip.title,
              method: this.editVip.method,
              modifyDate: new Date(),
              name: this.editVip.name,
              people: this.editVip.people,
              quantity: this.editVip.quantity,
              vip: this.editVip.vip,
              icon:this.editVip.icon
            }
            if(editVip.tagid == ""){
              editVip.tagid = null
            }
            update(editVip).then(response => {
              console.log(response)
              this.clicked = false;
              this.editVisible = false;
              this.loadVip()
              this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            }).catch(error => {
              this.clicked = false;
              console.log('error!!')
            })
          } else {
            this.clicked = false;
          }
        })

      }

    }
  }
</script>

<style scoped>
  .popup_content {
    padding-bottom: 0px !important;
  }

  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  /deep/ .el-select{
    width: 100%;
  }
.report_header_date{
 margin-left: 10px;
 margin-top: 5px;
}

</style>
